<template>
    <van-tabbar v-model="active" route active-color="#492FF8" class="active_tab">
        <van-tabbar-item to="/">
            <span>资产</span>
            <template #icon="props">
                <img :src="props.active ? icon1.active : icon1.inactive" />
            </template>
        </van-tabbar-item>
        <van-tabbar-item to="/market">
            <span>行情</span>
            <template #icon="props">
                <img :src="props.active ? icon2.active : icon2.inactive" />
            </template>
        </van-tabbar-item>
        <van-tabbar-item >
            <span>量化</span>
            <template #icon="props">
                <img :src="props.active ? icon3.active : icon3.inactive" />
            </template>
        </van-tabbar-item>
        <van-tabbar-item >
            <span>生态</span>
            <template #icon="props">
                <img :src="props.active ? icon4.active : icon4.inactive" />
            </template>
        </van-tabbar-item>
        <van-tabbar-item to="/profile">
            <span>我的</span>
            <template #icon="props">
                <img :src="props.active ? icon5.active : icon5.inactive" />
            </template>
        </van-tabbar-item>
    </van-tabbar>
</template>

<script>
  export default {
    name: "Tabbar",
    data(){
      return{
        active:'home',
        icon1:{
          active: require('assets/images/tabbar/capital_active.png'),
          inactive: require('assets/images/tabbar/capital.png',)
        },
        icon2:{
          active: require('assets/images/tabbar/quotation_active.png'),
          inactive: require('assets/images/tabbar/quotation.png',)
        },
        icon3:{
          active: require('assets/images/tabbar/quantification_active.png'),
          inactive: require('assets/images/tabbar/quantification.png',)
        },
        icon4:{
          active: require('assets/images/tabbar/ecology_active.png'),
          inactive: require('assets/images/tabbar/ecology.png',)
        },
        icon5:{
          active: require('assets/images/tabbar/profile_active.png'),
          inactive: require('assets/images/tabbar/profile.png',)
        }
      }
    }
  }
</script>

<style scoped>
.van-tabbar{
    height: 148px;
}
.active_tab img{
    width: 57px;
    height: 57px;
}
</style>
